<template>
	<view class="relative full-screen uni-bg-color">
		<view class="bg-primary" style="z-index:0;top:0;height:208px;">
			<image class="w-full" style="height: 100%;" mode="aspectFill" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-withdraw.png"></image>
		</view>
		<z-paging ref="paging">
			<template #top>
				<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
					<template #left>
						<image class="size-32" src="@/static/svg/icon-back.svg" />
					</template>
					<view class="flex center w-full fs-16"><text class="text-white">分销排行</text></view>
				</uni-nav-bar>
			</template>
			<view v-if="data">
				<view class="flex justify-between item-center mx-28 my-32 text-white">
					<view class="flex-col">
						<view class="fs-18 leading-20 mb-4">{{ numberFormat(data.totalOrderNum) }}</view>
						<view class="inline-flex item-center fs-12 leading-17">总分销份数</view>
					</view>
					<view class="w-1 h-9 bg-white"></view>
					<view class="flex-col">
						<view class="fs-18 leading-20 mb-4">{{ numberFormat(data.totalOrderPrice) }}</view>
						<view class="inline-flex item-center fs-12 leading-17">分销总额</view>
					</view>
					<view class="w-1 h-9 bg-white"></view>
					<view class="flex-col">
						<view class="fs-18 leading-20 mb-4">{{ numberFormat(data.totalCommission) }}</view>
						<view class="inline-flex item-center fs-12 leading-17">已结算佣金</view>
					</view>
				</view>
			</view>
			<view class="mx-16 mt-60">
				<view class="flex justify-between mb-8 c3">
					<text>排名</text>
					<text>分销数量/金额</text>
				</view>
				<view class="uni-bg-white radius-12 px-16 py-24">
					<view v-for="(item,index) in datalist" :key="index" class="flex justify-between item-center mb-24">
						<view class="flex item-center">
							<image v-if="index === 0" class="w-24 h-24" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/icon-1.svg"></image>
							<image v-else-if="index === 1" class="w-24 h-24" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/icon-2.svg"></image>
							<image v-else-if="index === 2" class="w-24 h-24" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/icon-3.svg"></image>
							<view class="flex center w-24 fs-18 c3 font-bold" v-else>{{ index + 1 }}</view>
							<image class="img-avatar" :src="item.avatar"></image>
							<view class="flex flex-col c3">
								<text class="font-bold">{{ item.nickName }}</text>
								<text>{{ item.mobile }}</text>
							</view>
						</view>
						<view class="flex flex-col align-end fs-12 c3">
							<text>{{ item.orderNum }}份/{{ numberFormat(item.orderPrice) }}</text>
							<text class="color-primary font-600">佣金：{{ numberFormat(item.commission) }}</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { agentRankApi } from '@/api/activity.js'
	import { numberFormat } from '@/utils/index.js'
	import {onLoad} from '@dcloudio/uni-app'
	const goBack = () => uni.navigateBack()
	
	const paging = ref()
	const datalist = ref([])
	const data = ref(null)
	
	const queryList = (id) => {
		agentRankApi({id}).then(res => {
				data.value = res
				datalist.value = res.list
			})
	}
	onLoad((query) => {
		queryList(query.id)
	})
</script>
<style scoped lang="scss">
	.img-avatar{
		border-radius: 50%;
		width: 32px;
		height: 32px;
		margin: 0 8px;
	}
</style>